<template>
  <back-btn></back-btn>
  <div id="app">
    <h2>{{ story.name }}</h2>
    <h3>{{ story.date }}</h3>
    <p>第一章： {{ story.list.first }}</p>
    <p>第二章： {{ story.list.last }}</p>

    <!-- <button @click="update">更新</button> -->
    <select @change="update">
      <option value="">无</option>
      <option value="name">更新名称</option>
      <option value="first">更新第一章</option>
    </select>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  setup() {
    /* 定义响应式数据对象 */
    const story = reactive({
      name: "小说名称",
      date: "更新时间",
      list: {
        first: "第一章",
        last: "第二章",
      },
    });

    /* 更新方法 */
    function update(e) {
      switch (e.target.value) {
        case "name":
          story.name = "妖神记";
          break;
        case "first":
          story.list.first = "重生";
          break;
        default:
          break;
      }
    }

    return {
      story,
      update,
    };
  },
});
</script>
